<template>
	<view class="content">
		<view class="tips">
			<image
				style="width: 300rpx;height: 268rpx;"
				src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/get-user-name.png"
				mode="aspectFill"
			></image>
		</view>
		<view v-if="canIUseGetUserProfile"><button class="button" @tap="getUserProfile">获取微信用户信息</button></view>
		<view v-else><button class="button" open-type="getUserInfo" @getuserinfo="getUserInfo">获取微信用户信息</button></view>
	</view>
</template>

<script>
import { getCommonShareInfo, authorTodo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return { canIUseGetUserProfile: uni.canIUse('getUserProfile') };
	},

	methods: {
		getUserProfile() {
			uni.getUserProfile({
				desc: '获取用户公开昵称和头像',
				success: ({ userInfo }) => {
					this.$store.dispatch('getWxUserProfile', userInfo).then(res => {
						this.authorTodo();
					});
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		getUserInfo(e) {
			uni.getUserInfo({
				success: ({ userInfo }) => {
					this.$store.dispatch('getWxUserProfile', userInfo).then(res => {
						this.authorTodo();
					});
				}
			});
		},
		authorTodo() {
			const url = uni.getStorageSync('authorCallbackUrl') || '/pages/personal/index';
			// #ifdef MP-WEIXIN
			authorTodo({
				type: 'userLocation',
				success: () => {
					// #endif
					uni.getLocation({
						type: 'gcj02',
						success: res => {
							this.$store.dispatch('getLocationByGPS', res).then(location => {
								uni.reLaunch({
									url,
									animationType: 'pop-in',
									animationDuration: 200,
									success() {
										uni.removeStorageSync('authorCallbackUrl');
									}
								});
							});
						}
					});
					// #ifdef MP-WEIXIN
				}
			});
			// #endif
		}
	}
};
</script>
<style lang="less" scoped>
.content {
	height: calc(100vh - 24rpx);
	background-color: #ffffff;
	text-align: center;
	padding: 0 28rpx;
	.tips {
		padding: 201rpx 0 91rpx 0;
	}

	.button {
		font-size: 30rpx;
		font-weight: 400;
		color: #66645d;
		line-height: 42rpx;
		background: #facc6b;
		padding: 20rpx 0;
		border-radius: 12rpx;
		margin-bottom: 46rpx;
	}
}
</style>
